<template>
  <div class="container">
    <div class="header">
      <p>热门问答
        <img class="hot-qus" src="../../../public/picture/fire.png" alt="">
      </p>
      <p class="authorBatch" @click="anthorQuestionList">换一批<img class="batchImage" src="../../../public/picture/batch.png" alt=""></p>
    </div>
    <div class="nwwest-roll" id="nwwest-roll">
      <ul id="roll-ul" class="list" ref="rollScroll">
        <li v-for="(item, index) in questionList" :key="index" ref="rollul"
            :class="{selected:selectedQuestion === item.question}" @click="emitToB(item.question,item.answer)">
          <h2 style="font-size:12px;">{{ item.question }}</h2>
          <p>{{ item.answer }}</p>
        </li>
      </ul>
    </div>
    <!--<ul class="list">-->
    <!--             <li-->
    <!--               v-for="(item, index) in questionList"-->
    <!--               :class="{-->
    <!--                 'selected': selectedQuestion === index-->
    <!--               }"-->
    <!--               :key="index"-->
    <!--               @click="emitToB(item.question,index)">-->
    <!--               <h2 >{{ item.question }}</h2>-->
    <!--               <p>{{ item.answer }}</p>-->
    <!--             </li>-->
    <!--           </ul>-->
  </div>
</template>

<script>
import eventBus from '../../common/eventBus.js'

export default {
  data () {
    return {
      questionList: [
        {
          question: '风寒感冒怎么办',
          answer: '风寒感冒的简介：风寒感冒是因风吹受凉而引起的感冒，秋冬发生较多。其症状为浑身酸痛、鼻塞流涕、咳嗽有痰。治疗上西药、中药皆可，亦可采用食疗，不但祛病，而且保健。预防措施为注意保暖，加强体育锻炼，提高免疫力，也可提前打预防针。风寒感冒，是风寒之邪外袭、肺气失宣所致。其起因通常是劳累，没休息好，再加上吹风或受凉。风寒感冒通常秋冬发生比较多。其风寒感冒属于太阳经症，太阳开机受阻。西医认为是各种可导致全身或呼吸道局部防御力降低的原因，如受凉、淋雨、过度疲劳等诱发因素，使全身或呼吸道局部防御功能降低时，原先存在于上呼吸道或外界侵入的病毒和细菌可迅速繁殖，引起发病，尤其是老幼体弱或有慢性呼吸道疾病如鼻旁窦炎、扁桃体炎者，更易患本病。\n风寒感冒的治疗方式有：药物治疗、支持性治疗'

        }, {
          question: '肠胃型感冒用药',
          answer: '在患 肠胃型感冒 时，可能会用药：川贝枇杷糖浆、小柴胡颗粒'
        }, {
          question: '头孢地尼分散片用途',
          answer: '头孢地尼分散片 可用于治疗疾病：前庭大腺炎'
        }, {
          question: '如何防止偏头痛',
          answer: '以下是有关预防 偏头痛 的知识：偏头痛预防 由于许多因素可诱发偏头痛，在生活起居中注意调护，避免这些因素对身体的侵袭，慎起居，调理饮食，情志等在一定程度可以预防偏头痛发作。 偏头痛生活调理 \n1、注意气侯的影响，风，燥，湿热，暴风雨，明亮耀眼的阳光，寒冷，雷声等气候变化均可诱发偏头痛发作，注意避风寒，保暖，不要暴晒淋雨，防止诱发致病。 \n2、注意睡眠，运动或过劳的影响，注意规律的睡眠，运动，加强工作计划性，条理性，注意劳逸结合，注意眼睛调节，保护对敏感病人来说是重要的预防措施。 \n3、注意室内通风，戒烟酒。 \n4、注意药物的影响，可诱发偏头痛药物如避孕药，硝酸甘油，组织胺，利血平，肼苯达嗪，雌激素，过量VitA等。'
        }, {
          question: '偏头痛要治疗多久',
          answer: '偏头痛需要的治疗时间：10-21天'
        }, {
          question: '小儿糖尿病有啥并发症',
          answer: '小儿糖尿病的并发症可能有：糖尿病酮症酸中毒、糖尿病肾病'
        }, {
          question: '什么人容易患血管性头痛',
          answer: '血管性头痛的易感人群是：女性、脑力劳动者易发病.电脑、教师等也常见'
        }, {
          question: '老年人糖尿病有啥症状',
          answer: '老年人糖尿病的并发症可能有：高渗性非酮症高血糖昏迷、乳酸性酸中毒、糖尿病酮症酸中毒、糖尿病足、低血糖'
        }, {
          question: '头痛能治吗',
          answer: '头痛的简介：头痛是临床常见症状之一，通常指局限于头颅上半部，包括眉弓、耳轮上缘和枕外隆突连线上的疼痛，病因较复杂，可由颅内病变，颅外头颈部病变，头颈部以外躯体疾病及神经官能症、精神病等引起。\n头痛的治疗方式有：药物治疗、康复治疗'
        }
      ],
      // questionList: [],
      selectedQuestion: '',
      timerKey: ''
    }
  },
  created () {
    this.startSxroll()
  },
  mounted () {
  },
  methods: {
    // 换一批
    anthorQuestionList () {
      this.questionList = [
        {
          question: '百日咳属于什么科',
          answer: '百日咳 属于 小儿内科'
        },
        {
          question: '小儿糖尿病有啥并发症',
          answer: '小儿糖尿病的并发症可能有：糖尿病酮症酸中毒、糖尿病肾病'
        }, {
          question: '什么人容易患血管性头痛',
          answer: '血管性头痛的易感人群是：女性、脑力劳动者易发病.电脑、教师等也常见'
        }, {
          question: '老年人糖尿病有啥症状',
          answer: '老年人糖尿病的并发症可能有：高渗性非酮症高血糖昏迷、乳酸性酸中毒、糖尿病酮症酸中毒、糖尿病足、低血糖'
        }, {
          question: '头痛能治吗',
          answer: '头痛的简介：头痛是临床常见症状之一，通常指局限于头颅上半部，包括眉弓、耳轮上缘和枕外隆突连线上的疼痛，病因较复杂，可由颅内病变，颅外头颈部病变，头颈部以外躯体疾病及神经官能症、精神病等引起。\n头痛的治疗方式有：药物治疗、康复治疗'
        }, {
          question: '风寒感冒吃什么药',
          answer: '在患 风寒感冒 时，可能会用药：维C银翘片、复方感冒灵颗粒'
        }
      ]
      if (this.questionList.length < 6) {
        clearInterval(this.timerKey)
        this.startSxroll()
      } else {
        this.startSxroll()
      }

    },
    // 发送信息
    emitToB (val,ans) {
      this.selectedQuestion = val
      eventBus.$emit('hotTopic', val,ans)
    },
    // 开始滚动
    startSxroll () {
      this.timerKey = setInterval(this.scroll, 5000)
    },
    scroll () {
      let scrollUl = this.$refs.rollScroll
      this.questionList.push(this.questionList[0])
      scrollUl.style.transition = 'all 0.5s'
      scrollUl.style.top = '-125px'
      setTimeout(() => {
        this.questionList.shift()
        scrollUl.style.transition = 'none'
        scrollUl.style.top = '0'
      }, 500)
    }
  }
}
</script>

<style scoped>
.container {
  position: absolute;
  right: 0;
  width: 256px;
  /*no*/
  height: 100%;
  top: 0;
  background-color: #e2effc;
  margin-left: 2px;
  box-shadow: -2px 0 9px 0 rgba(0, 0, 0, 0.08);
}

.header {
  height: 57px;
  /*no*/
  line-height: 57px;
  /*no*/
  padding: 0 33px;
  /*no*/
  color: #555966;
  font-size: 14px;
  /*no*/
  border-bottom: 1px solid #E4F2EA;
  /*no*/
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.authorBatch {
  cursor: pointer;
  color: rgb(47, 149, 222);
}

.header img {
  width: 12px;
  /*no*/
  height: 16px;
  /*no*/
  margin-left: 7px;
  /*no*/
}

li {
  padding: 12px 15px;
  /*no*/
  background-color: #fff;
  margin: 10px;
  /*no*/
  border-radius: 4px;
  /*no*/
  border: 1px solid #F0F0F0;
  /*no*/
  cursor: pointer;
  font-size: 12px;
}

li.selected {
  background-color: #419dbf;
}

li.selected h2 {
  color: #fff;
}

li.selected p {
  color: #FFFFFF;
  opacity: 0.8;
}

.list h2 {
  color: #555966;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  /*no*/
}

.list p {
  color: #898794;
  font-size: 12px;
  /*no*/
  margin-top: 7px;
  /*no*/
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: pre;
}

.nwwest-roll {
  margin-top: -12px;
  overflow: hidden;
  transition: all 0.5s;
}

#roll-ul {
  /* transition: all 0.5s; */
  position: relative;
  top: 0;
}

.header .batchImage {
  width: 17px;
  height: 17px;
  vertical-align: middle;
}
.hot-qus{
  margin-top: -4px;
  overflow: hidden;
  vertical-align: middle;
}
</style>
